<template>
  <div class="main-content">
    <div class="cover-img">
      <img class="animated fadeInDown" src="@/assets/img/fuli-mall-02.png" alt="">
    </div>
    <button class="icon-back flex-box" @click="goBack">
      <svg class="icon svg-icon" aria-hidden="true">
        <use xlink:href="#icon-gb-xiazai6"></use>
      </svg>
    </button>
    <div class="fuli-container">
      <div class="fuli-main">
        <img class="adv-img animated slideInBoRight" src="@/assets/img/fuli-mall-01.png" alt="">
        <dl class="flex-box">
          <dt><p>员工专享</p></dt>
          <dd :class="{active:item.name==='华大基因'}" v-for="(item,index) in listsYG" :key="index" @click="toFuLiMall">
            <img :src="require('@/assets/img/'+item.icon)" alt="">
            <p>{{item.name}}</p>
            <h6>员工福利商城</h6>
          </dd>
        </dl>
        <dl class="flex-box sec-box">
          <dt><p>用户专享</p></dt>
          <dd v-for="(item,index) in listsYH" :key="index">
            <img :src="require('@/assets/img/'+item.icon)" alt="">
            <p>{{item.name}}</p>
            <h6>员工福利商城</h6>
          </dd>
          <dd class="empty"></dd>
          <dd class="empty"></dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/css/gb-index.scss'
// @ is an alias to /src
export default {
  name: 'mallFuLi',
  data() {
    return {
      listsYG: [
        {
          name: '华大基因',
          icon: 'qiye-icons_01.png'
        },
        {
          name: '招商仁和',
          icon: 'qiye-icons_02.gif'
        },
        {
          name: '中国邮政',
          icon: 'qiye-icons_03.gif'
        },
        {
          name: 'HSBC',
          icon: 'qiye-icons_04.gif'
        },
        {
          name: '顺丰速运',
          icon: 'qiye-icons_05.gif'
        },
        {
          name: '万科',
          icon: 'qiye-icons_06.gif'
        },
        {
          name: '中国移动',
          icon: 'qiye-icons_07.gif'
        },
        {
          name: '中国联通',
          icon: 'qiye-icons_08.gif'
        }
      ],
      listsYH: [
        {
          name: '中国邮政',
          icon: 'qiye-icons_09.gif'
        },
        {
          name: '深圳广电',
          icon: 'qiye-icons_10.jpg'
        }
      ]
    }
  },
  components: {},
  computed: {},
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    toFuLiMall() {
      console.log('lll')
      this.$router.push('/fulimall')
    }
  },
  mounted() {}
}
</script>
<style scoped lang="scss">
.main-content {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 18px;
  background: #1c93d0;
  box-sizing: border-box;
  .cover-img {
    width: 294px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    img {
      width: 100%;
    }
  }
  .icon-back {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    background: rgba($color: #ffffff, $alpha: 0.8);
    border-radius: 36px;
    border: none;
    outline: none;
    color: #333;
    z-index: 2;
    text-align: center;
    svg {
      position: relative;
      font-size: 16px;
    }
  }
  .fuli-container {
    width: 100%;
    height: 100%;
    padding-top: 28px;
    padding-bottom: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    .fuli-main {
      border-radius: 15px;
      width: 100%;
      height: 100%;
      background: #fff;
      position: relative;
      .adv-img {
        position: absolute;
        top: -12px;
        right: 0;
        width: 236px;
        z-index: 3;
        -webkit-animation-duration: 0.75s;
        animation-duration: 0.75s;
        animation-delay: 0.25s;
        -webkit-animation-delay: 0.25s;
      }
      dl {
        width: 100%;
        padding: 0 6px;
        box-sizing: border-box;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        overflow: hidden;
        justify-content: space-around;
        -webkit-justify-content: space-around;
        &.sec-box {
          dt {
            margin-top: 6px;
            p {
              background: #51b2e9;
            }
          }
        }
        dt {
          width: 100%;
          margin-top: 150px;
          text-align: left;
          margin-bottom: 16px;
          p {
            width: 106px;
            background: #e95180;
            color: #fff;
            text-align: center;
            height: 32px;
            line-height: 32px;
            border-top-right-radius: 32px;
            border-bottom-right-radius: 32px;
            font-size: 16px;
            position: relative;
            left: -8px;
          }
        }
        dd {
          width: 75px;
          height: 75px;
          background: #fff;
          border-radius: 6px;
          margin-bottom: 12px;
          text-align: center;
          position: relative;
          overflow: hidden;
          box-shadow: 0 0 4px rgba($color: #000000, $alpha: 0.08);
          box-sizing: border-box;
          &.empty {
            opacity: 0;
          }
          &.active {
            background: #51b2e9;
            p {
              color: #fff;
            }
            h6 {
              background: #2c5ea3;
              width: 100%;
              text-align: center;
              color: #fff;
            }
          }
          img {
            height: 32px;
            margin-top: 2px;
            margin-bottom: 2px;
          }
          p {
            font-size: 14px;
            color: #555;
          }
          h6 {
            color: #999;
            white-space: nowrap;
            position: absolute;
            height: 18px;
            line-height: 18px;
            left: 0;
            font-size: 10px;
            bottom: 0;
            width: 100%;
          }
        }
      }
    }
  }
}
@-webkit-keyframes slideInBoRight {
  0% {
    -webkit-transform: translate3d(100%, 30%, 0);
    transform: translate3d(100%, 30%, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInBoRight {
  0% {
    -webkit-transform: translate3d(100%, 30%, 0);
    transform: translate3d(100%, 30%, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInBoRight {
  -webkit-animation-name: slideInBoRight;
  animation-name: slideInBoRight;
}
</style>
